<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>${title}</title>
    <style>
        .demo-content button {
            margin: 10px;
        }

        .demo-content fieldset {
            margin: 10px;
            border-color: #2b81af;
        }

        .note {
            color: red;
            margin-left: 20px;
        }

        .code-title {
            margin-left: 20px;
            color: #006699;
        }
    </style>
    <link type="text/css" rel="stylesheet" href="/static/syntaxhighlighter_3.0.83/styles/shCoreDefault.css"/>
    <script src="/static/jquery-1.12.4/jquery.min.js"></script>
    <script type="text/javascript" src="/static/syntaxhighlighter_3.0.83/scripts/shCore.js"></script>
    <script type="text/javascript" src="/static/syntaxhighlighter_3.0.83/scripts/shBrushJScript.js"></script>
    <script type="text/javascript" src="/static/syntaxhighlighter_3.0.83/scripts/shBrushJava.js"></script>
    <script type="text/javascript" src="/static/syntaxhighlighter_3.0.83/scripts/shBrushXml.js"></script>

    <script>
        $(function () {
            SyntaxHighlighter.all();
            $("#btnModelAndViewDemo").click(function () {
                window.open("/demo/modelAndViewDemo");
            });
            $("#btnContentResult").click(function () {
                $.ajax({
                    url: '/demo/contentResultDemo',
                    type: 'GET',
                    success: function (result) {
                        $("#contentResult").html(result);
                    }
                });
            });
            $("#btnJsonResult").click(function () {
                $.ajax({
                    url: '/demo/jsonResultDemo',
                    type: 'POST',
                    data: {
                        username: "张三",
                        age: 12
                    },
                    success: function (result) {
                        $("#jsonResult").html("姓名：" + result.username + ",电话：" + result.tel);
                    }
                });
            });
            $("#btnPartialViewResult").click(function () {
                $.ajax({
                    url: '/demo/partialViewDemo',
                    success: function (result) {
                        $("#partialViewResult").html(result);
                    }
                });
            });
            $("#btnJavaScriptResult").click(function () {
                $.ajax({
                    url: '/demo/javaScriptResultDemo',
                    type: 'GET'
                });
            });
            $("#btnRedirectResult").click(function () {
                window.open("/demo/redirectResultDemo");
            });
            $("#btnFileResult").click(function () {
                window.open("/demo/filePathResultDemo");
            });
            $("#btnUrlParaDemo").click(function () {
                window.open("/demo/urlParaDemo/a/123");
            });
        });

    </script>
</head>
<body>
<div class="demo-content">
    <fieldset>
        <legend>打开页面案例</legend>
        <button id="btnModelAndViewDemo">点击测试</button>
        <div class="code-title">前台代码↓</div>
        <pre class="brush: js;">
        window.open("/demo/modelAndViewDemo");
        </pre>
        <div class="code-title">后台代码↓</div>
        <pre class="brush: java;">
        @Controller
        public class DemoController extends CarsonActionController {
            public ModelAndView modelAndViewDemo() {
                ModelAndView mv = new ModelAndView("demo/modelAndViewDemo");
                return mv;
            }
            ...
        }
        </pre>

    </fieldset>
    <fieldset>
        <legend>返回字符串案例</legend>
        <button id="btnContentResult">点击测试</button>
        <div id="contentResult">
        </div>
        <div class="code-title">前台代码↓</div>
        <pre class="brush: js;">
        $.ajax({
            url: '/demo/contentResultDemo',
            type: 'GET',
            success: function (result) {
                $("#contentResult").html(result);
            }
        });
        </pre>
        <div class="code-title">后台代码↓</div>
        <pre class="brush: java;">
        @Controller
        public class DemoController extends CarsonActionController {
            public ContentResult contentResultDemo() {
                return Content("<p style='color:red'>我是后台返回的ContentResult</p>");
            }
            ...
        }
        </pre>
        <div class="note">
            备注：URL支持GET和POST请求
        </div>
    </fieldset>
    <fieldset>
        <legend>返回JSON案例</legend>
        <button id="btnJsonResult">点击测试</button>
        <div id="jsonResult">
        </div>
        <div class="code-title">前台代码↓</div>
        <pre class="brush: js;">
        $.ajax({
            url: '/demo/jsonResultDemo',
            type: 'POST',
            data: {
                username: "张三",
                age: 12
            },
            success: function (result) {
                $("#jsonResult").html("姓名：" + result.username + ",电话：" + result.tel);
            }
        });
        </pre>
        <div class="code-title">后台代码↓</div>
        <pre class="brush: java;">
        @Controller
        public class DemoController extends CarsonActionController {
            public JsonResult jsonResultDemo() {
                Map&lt;String, Object&gt; resultMap = new HashMap&lt;String, Object&gt;();
                resultMap.put("username", getPara("username"));
                resultMap.put("age", getPara("age"));
                resultMap.put("tel", "180xxxxxxxx");
                return Json(resultMap);
            }
            ...
        }
        </pre>
        <div class="note">
            备注：URL支持GET和POST请求
        </div>
    </fieldset>
    <fieldset>
        <legend>Ajax返回页面案例</legend>
        <button id="btnPartialViewResult">点击测试</button>
        <div id="partialViewResult">
        </div>
        <div class="code-title">前台代码↓</div>
        <pre class="brush: js;">
        $.ajax({
            url: '/demo/partialViewDemo',
            success: function (result) {
                $("#partialViewResult").html(result);
            }
        });
        </pre>
        <div class="code-title">后台代码↓</div>
        <pre class="brush: java;">
        @Controller
        public class DemoController extends CarsonActionController {
            public ModelAndView partialViewDemo() {
                ModelAndView mv = new ModelAndView("demo/partialViewDemo");
                Date now = new Date();
                SimpleDateFormat simpleDateFormat = new SimpleDateFormat("yyyy-MM-dd HH:mm:ss");
                String nowStr = simpleDateFormat.format(now);
                mv.addObject("now", nowStr);
                return mv;
            }
            ...
        }
        </pre>
        <div class="note">
            备注：URL支持GET和POST请求
        </div>
    </fieldset>
    <fieldset>
        <legend>返回JavaScript代码案例</legend>
        <button id="btnJavaScriptResult">点击测试</button>
        <div class="code-title">前台代码↓</div>
        <pre class="brush: js;">
        $.ajax({
            url: '/demo/javaScriptResultDemo',
            type: 'GET'
        });
        </pre>
        <div class="code-title">后台代码↓</div>
        <pre class="brush: java;">
        @Controller
        public class DemoController extends CarsonActionController {
            public JavaScriptResult javaScriptResultDemo() {
                return JavaScript("alert('我是后台返回的javaScript');");
            }
            ...
        }
        </pre>
    </fieldset>
    <fieldset>
        <legend>页面重定向案例</legend>
        <button id="btnRedirectResult">点击测试</button>
        <div class="code-title">前台代码↓</div>
        <pre class="brush: js;">
        window.open("/demo/redirectResultDemo");
        </pre>
        <div class="code-title">后台代码↓</div>
        <pre class="brush: java;">
        @Controller
        public class DemoController extends CarsonActionController {
            public RedirectResult redirectResultDemo() {
                return Redirect("http://www.baidu.com");
            }
            ...
        }
        </pre>
    </fieldset>
    <fieldset>
        <legend>文件下载案例</legend>
        <button id="btnFileResult">点击测试</button>
        <div class="code-title">前台代码↓</div>
        <pre class="brush: js;">
        window.open("/demo/filePathResultDemo");
        </pre>
        <div class="code-title">后台代码(三种模式，任选一种)↓</div>
        <pre class="brush: java;">
        @Controller
        public class DemoController extends CarsonActionController {
            /**
             * 文件下载案例（文件路径）
             */
            public FilePathResult filePathResultDemo() {
                String rootPath = getRequest().getServletContext().getRealPath("/");
                String filePath = Paths.get(rootPath, "attachment", "testfile.zip").toString();
                return File(filePath, "application/zip");
            }

            /**
             * 文件下载案例（文件流）
             */
            public FileStreamResult fileStreamResultDemo() throws FileNotFoundException {
                String rootPath = getRequest().getServletContext().getRealPath("/");
                String filePath = Paths.get(rootPath, "attachment", "testfile.zip").toString();
                FileInputStream fileInputStream = new FileInputStream(filePath);
                return File(fileInputStream, "application/zip", "testfile.zip");
            }

            /**
             * 文件下载案例（文件内容byte数组）
             */
            public FileContentResult fileContentResultDemo() throws IOException {
                String rootPath = getRequest().getServletContext().getRealPath("/");
                String filePath = Paths.get(rootPath, "attachment", "testfile.zip").toString();
                File file = new File(filePath);
                long len = file.length();
                byte[] bytes = new byte[(int) len];
                FileInputStream fileInputStream = new FileInputStream(file);
                BufferedInputStream bufferedInputStream = new BufferedInputStream(fileInputStream);
                int r = bufferedInputStream.read(bytes);
                bufferedInputStream.close();
                return File(bytes, "application/zip", "testfile.zip");
            }
            ...
        }
        </pre>
    </fieldset>
    <fieldset>
        <legend>URL传参数案例</legend>
        <button id="btnUrlParaDemo">点击测试</button>
        <div class="code-title">前台代码↓</div>
        <pre class="brush: js;">
        window.open("/demo/urlParaDemo/a/123");
        </pre>
        <div class="code-title">后台代码↓</div>
        <pre class="brush: java;">
        @Controller
        public class DemoController extends CarsonActionController {
            public ModelAndView urlParaDemo(){
                String urlPara0=getPara(0);//value:a
                String urlPara1=getPara(1);//value:123
                ModelAndView mv=new ModelAndView("demo/urlParaDemo");
                mv.addObject("urlPara0",urlPara0);
                mv.addObject("urlPara1",urlPara1);
                return mv;
            }
            ...
        }
        </pre>
        <div class="note">
            备注：URL支持GET和POST请求
        </div>
    </fieldset>
    <fieldset>
        <legend>表单数据反序列化到对象</legend>
        <form method="post" action="/demo/formDataDemo">
            <div>
                员工1
                <br/>
                姓名<input name="username">
                年龄<input type="number" name="age">
                <br/>
                员工2
                <br/>
                姓名<input name="user2.username">
                年龄<input type="number" name="user2.age">
            </div>
            <button id="btnFormDataDemo">点击测试</button>
        </form>
        <div class="code-title">前台代码↓</div>
        <pre class="brush: xml;">
        &lt;form method=&quot;post&quot; action=&quot;/demo/formDataDemo&quot;&gt;
            &lt;div&gt;
                员工1
                &lt;br/&gt;
                姓名&lt;input name=&quot;username&quot;&gt;
                年龄&lt;input type=&quot;number&quot; name=&quot;age&quot;&gt;
                &lt;br/&gt;
                员工2
                &lt;br/&gt;
                姓名&lt;input name=&quot;user2.username&quot;&gt;
                年龄&lt;input type=&quot;number&quot; name=&quot;user2.age&quot;&gt;
            &lt;/div&gt;
            &lt;button id=&quot;btnFormDataDemo&quot;&gt;点击测试&lt;/button&gt;
        &lt;/form&gt;
        </pre>
        <div class="code-title">后台代码↓</div>
        <pre class="brush: java;">
        @Controller
        public class DemoController extends CarsonActionController {
            public ModelAndView formDataDemo(){
                User user = getModel(User.class);
                User user2 = getModel(User.class,"user2");
                ModelAndView mv=new ModelAndView("demo/formDataDemo");
                mv.addObject("user",user);
                mv.addObject("user2",user2);
                return mv;
            }
            ...
        }
        </pre>
        <div class="note">
            备注：URL支持GET和POST请求
        </div>
    </fieldset>
</div>
</body>
</html>
